<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model='msg'>
    <!-- 获取表单数据监听内容 -->
    <input type="text" v-focus>
    <!-- 自定义指令 -->
    <div>{{reverse}}</div>
    <!-- 计算属性 把逻辑放在计算属性中 -->
  </div>
  <script src="../vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg: ''
      },
      watch: {
        // 方法第一个参数,参数是指数据更改之后的最新值
        // 对谁进行监听,那么那个数据属性就是键
        msg: function (val) {
          // 不需要return 返回获得数据
          console.log(val);

        }
      },//监听器 侦听器
      computed: {//计算属性
        //计算属性，必须要用return 返回的数据来获取值 里面的数据根据data中的数据而变化
        reverse: function () {
          return this.msg.split('').reberse().join('')
        }
      },
      directives: {//自定义指令 键 值自定义指令的名称  值 自定义指令的逻辑
        focus: {//指令的名称
          inserted: function (el) {//对象
            el.focus()
            // el 代表着所使用自定义指令的元素
          }
        }
      },
      filiters: {
        //过滤器 第一个参数 过滤器名称  第二个参数 回调函数  形参 需要格式化的数据
        upper: function (val) {
          return val.charAt(0).toUpperCase() + val.slice(1)
          //需要return  来返回获取数据
        }
      }
    })
  </script>
</body>

</html>